<!--
 领导批示卡片
 @Author: zhanbh
 @Date: 2021-04-20
-->
<template>
    <div class="instruction-card">
        <header class="instruction-card__header">
            <slot name="header">
                {{title}}
            </slot>
        </header>
        <main class="instruction-card__main">
            <slot>
                <span v-if="statusText"
                      class="instruction-card__status"
                      :class="statusType"
                      :style="statusStyle"
                >{{statusText}}</span>
                <p class="instruction-card__content"
                   :class="lineInfo.cssClass"
                   :style="lineInfo.style"
                   :title="lineInfo.cssClass ? content : ''"
                >
                    {{content}}
                </p>
            </slot>
        </main>
    </div>
</template>
<script>
    let STATUS = ['info', 'error', 'success'];
    export default {
        name: "InstructionCard",
        props: {
            title: String,
            status: String,  // error, success, info 也可直接设置为颜色值
            statusText: String,
            content: String,
            line: { // 内容行数
                type: [Number, String],
                default: 2
            }
        },
        data() {
            return {};
        },
        computed: {
            /**
             * 状态类型  分 is-error  is-success is-info
             * @return {string}
             */
            statusType() {
                let {status} = this;
                let className = '';

                if (STATUS.includes(status)) {
                    className = `is-${status}`;
                }

                return className
            },

            // 当status值直接设置为颜色值
            statusStyle() {
                let {status} = this;
                let style = '';

                if (!STATUS.includes(status)) {
                    style = `color: ${status}`;
                }

                return style;
            },

            // 内容的行样式信息，如果有指定行数，则最多展示指定行数
            lineInfo() {
                let result = {
                    cssClass: '',
                    style: ''
                };
                let line = Number.parseInt(this.line);

                if (line > 0) {
                    result.cssClass = 'is-ellipsis';
                    result.style = `-webkit-line-clamp: ${line}; height: ${line * 1.8}em; `
                }

                return result;
            }
        },
        methods: {},
        created() {
        }
    };
</script>
<style scoped lang="scss">
    $--info: #4090ff;
    $--error: #f5222d;
    $--success: #52c41a;

    .instruction-card{
        position: relative;
        width: 21.125rem;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
        border-radius: 2px;
        border: solid 1px #d9d9d9;
        margin-bottom: 4px;
        font-size: 0.875rem;

        &:after{
            content: '';
            display: inline-block;
            position: absolute;
            bottom: -4px;
            left: 0.5rem;
            right: 0.5rem;
            height: 4px;
            background-color: #000000;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
            border-radius: 2px;
            opacity: 0.15;
        }

        &__header{
            padding: 0.875rem 1.5rem;
            background-color: rgba(#000, .02);
        }

        &__main{
            padding: 1rem 1.5rem;
        }

        &__status{
            font-weight: bold;
            color: $--info;
            line-height: 1.8;
        }
        &__status.is-error{
            color: $--error;
        }
        &__status.is-success{
            color: $--success;
        }

        &__content{
            margin: 2px 0 0.75rem 0;
            box-sizing: border-box;
        }
        &__content.is-ellipsis{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
</style>
